<template>
  <div class="container">
    <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
      <n-drawer-content :title="title" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="分类名称" path="label">
            <n-input placeholder="请输入分类名" v-model:value="formParams.label" />
          </n-form-item>
          <n-form-item label="key" path="key">
            <n-input placeholder="请输入唯一的key" v-model:value="formParams.key" />
          </n-form-item>
          <n-form-item label="状态" path="state">
            <n-switch v-model:value="formParams.state" checked-value="1" unchecked-value="0">
              <template #checked> 已启用 </template>
              <template #unchecked> 已禁用 </template>
            </n-switch>
          </n-form-item>
          <n-form-item label="排序" path="ranking">
            <n-input-number
              v-model:value="formParams.ranking"
              placeholder="排序越大越靠前"
              button-placement="both"
              style="width: 200px"
            />
          </n-form-item>
        </n-form>

        <template #footer>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { useMessage } from 'naive-ui';
  import { addMaterialCategory } from '@/api/material/materialCategory';

  const rules = {
    label: {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
    key: {
      required: true,
      message: '请输入唯一的key',
      trigger: 'blur',
    },
  };
  export default defineComponent({
    name: 'CreateDrawer',
    components: {},
    props: {
      title: {
        type: String,
        default: '添加素材分类',
      },
      width: {
        type: Number,
        default: 450,
      },
    },
    setup() {
      const message = useMessage();
      const formRef: any = ref(null);
      const defaultValueRef = () => ({
        label: '',
        ranking: 0,
        key: '',
        state: 0,
      });

      const state = reactive({
        isDrawer: false,
        subLoading: false,
        formParams: defaultValueRef(),
        placement: 'right',
        alertText:
          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
      });

      function openDrawer() {
        state.isDrawer = true;
      }

      function closeDrawer() {
        state.isDrawer = false;
      }

      function formSubmit() {
        formRef.value.validate((errors) => {
          if (!errors) {
            console.log(formRef.value);
            // addMaterialCategory()
            message.success('添加成功');
            handleReset();
            closeDrawer();
          } else {
            message.error('请填写完整信息');
          }
        });
      }

      function handleReset() {
        formRef.value.restoreValidation();
        state.formParams = Object.assign(state.formParams, defaultValueRef());
      }

      return {
        ...toRefs(state),
        formRef,
        rules,
        formSubmit,
        handleReset,
        openDrawer,
        closeDrawer,
      };
    },
  });
</script>
